<template>
  <div class="app-container">
    <el-card shadow="hover" border>
      <!-- 卡片头部：标题 + 返回按钮 -->
      <template #header>
        <div class="card-header">
          <span class="title">博客详情</span>
          <el-button 
            type="text" 
            icon="ArrowLeft" 
            @click="handleBack"
            class="back-btn"
          >返回列表</el-button>
        </div>
      </template>

      <!-- 详情表单：所有控件禁用，仅用于展示 -->
      <el-form 
        ref="detailFormRef" 
        :model="form" 
        label-width="120px"
        class="mt-4"
        :disabled="true"
      >
        <!-- 基础信息区域 -->
        <el-divider content-position="left">基础信息</el-divider>
        <el-form-item label="博客唯一ID">
          <el-input v-model="form.blogId" readonly />
        </el-form-item>
        <el-form-item label="博客标题">
          <el-input v-model="form.title" readonly />
        </el-form-item>
        <el-form-item label="URL友好标识">
          <el-input v-model="form.slug" readonly />
        </el-form-item>
        <el-form-item label="作者名称">
          <el-input v-model="form.authorName" readonly />
        </el-form-item>
        <el-form-item label="关联作者ID">
          <el-input v-model="form.authorId" readonly />
        </el-form-item>
        <el-form-item label="关联分类ID">
          <el-input v-model="form.categoryId" readonly />
        </el-form-item>

        <!-- 状态与统计区域 -->
        <el-divider content-position="left">状态与统计</el-divider>
        <el-form-item label="发布状态">
          <el-select v-model="form.status" disabled>
            <el-option
              v-for="dict in ver_blog_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input v-model="form.viewCount" readonly />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input :value="formatTime(form.publishTime)" readonly />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input :value="formatTime(form.createTime)" readonly />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input :value="formatTime(form.updateTime)" readonly />
        </el-form-item>

        <!-- 内容区域 -->
        <el-divider content-position="left">博客内容</el-divider>
        <el-form-item label="博客导语/摘要">
          <el-input v-model="form.excerpt" type="textarea" rows="3" readonly />
        </el-form-item>
        <el-form-item label="博客封面图">
          <div class="cover-image-container">
            <image-preview 
              :src="form.coverImageUrl" 
              :width="150" 
              :height="100"
              v-if="form.coverImageUrl"
            />
            <span class="no-image" v-else>无封面图</span>
          </div>
        </el-form-item>
        <el-form-item label="博客正文">
          <div class="blog-content" v-html="form.content || '无正文内容'"></div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="VerBlogDetail">
import { getVerBlog } from "@/api/system/verBlog";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

// 路由实例：route获取参数，router控制跳转
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
// 加载博客状态字典（与列表/新增/编辑页一致）
const { ver_blog_status } = proxy.useDict('ver_blog_status');
const detailFormRef = ref(null);

// 详情表单数据（与编辑页字段完全对齐）
const data = reactive({
  form: {
    blogId: null,
    title: null,
    slug: null,
    excerpt: null,
    content: null,
    coverImageUrl: null,
    authorId: null,
    authorName: null,
    categoryId: null,
    status: null,
    viewCount: null,
    publishTime: null,
    createTime: null,
    updateTime: null
  }
});
const { form } = toRefs(data);

/** 时间格式化：统一时间显示格式（与列表页一致） */
const formatTime = (time) => {
  return time ? proxy.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}') : '未设置';
};

/** 加载博客详情数据 */
const loadBlogDetail = () => {
  // 从路由参数中获取博客ID
  const blogId = route.params.blogId;
  if (!blogId) {
    proxy.$modal.msgError("参数错误：缺少博客ID");
    router.push('/system/verBlog'); // 参数错误时返回列表页
    return;
  }

  // 调用接口加载详情
  getVerBlog(blogId).then(response => {
    form.value = response.data; // 接口数据赋值到表单
  }).catch(err => {
    proxy.$modal.msgError("加载博客详情失败：" + (err.message || '网络异常'));
    router.push('/system/verBlog');
  });
};

/** 返回列表页 */
const handleBack = () => {
  router.push('/system/verBlog');
};

// 页面初始化：加载详情数据
onMounted(() => {
  loadBlogDetail();
});
</script>

<style scoped>
/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.back-btn {
  color: #409eff;
}

/* 封面图容器样式 */
.cover-image-container {
  display: flex;
  align-items: center;
  padding: 4px 0;
}
.no-image {
  color: #9ca3af;
  font-size: 14px;
}

/* 博客正文展示样式 */
.blog-content {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  min-height: 300px;
  line-height: 1.8;
  color: #374151;
  background-color: #f9fafb;
}
.blog-content img {
  max-width: 100%;
  border-radius: 4px;
  margin: 12px 0;
}
.blog-content p {
  margin: 8px 0;
}
.blog-content h1, .blog-content h2, .blog-content h3 {
  margin: 16px 0 8px;
  color: #1f2937;
}

/* 表单项间距调整 */
.el-form-item {
  margin-bottom: 16px;
}
.el-divider {
  margin: 24px 0 16px;
}
</style>